<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BIMsurfer Interactive Demo</title>
<link rel="icon" type="image/png" href="../img/application_home.png" />
<link href="../css/apps.css" type="text/css" rel="stylesheet" />
<link href="../css/interactive.css" type="text/css" rel="stylesheet" />
</head>

<body class="interactive">
	<div id="tabs">
		<div id="serversTab" class="tab">Server</div>
		<div id="loginTab" class="tab">Login</div>
		<div id="selectProjectTab" class="tab">Project</div>
		<div id="selectRevisionTab" class="tab">Revision</div>
		<div id="viewerTab" class="tab">Viewer</div>
	</div>
	<div id="servers" class="tabcontent">
		<h1>Select BIMserver</h1>
		<div>
			<form>
				Address: <input id="address" type="text" value="http://localhost:8080">
				<button id="connectButton">Connect</button>
			</form>
		</div>
		<h2>OR connect to one of the following common addresses</h2>
		<div id="serverList"></div>
	</div>
	<div id="login" class="tabcontent">
		<div id="loginStatus"></div>
		<input id="username" type="text" placeholder="Username (email)"/>
		<input id="password" type="password" placeholder="Password"/>
		<button id="loginButton">Login</button>
	</div>
	<div id="selectProject" class="tabcontent"></div>
	<div id="selectRevision" class="tabcontent"></div>
	<div id="viewer" class="tabcontent">
		<canvas id="glcanvas"></canvas>
		<div id="progressbar">
			<div id="progress"></div>
		</div>
	</div>
</body>

<script type="module" src="interactive.js"></script>
</html>